<template>
  <div class="padding flex height-100 content-with-tree">
    <div class="left-tree">
      <div class="info-title">所有应用</div>
      <el-scrollbar style="height: calc(100% - 60px)" wrap-style="overflow-x: hidden;">
        <ul class="app-ul">
          <li
            class="app-li" v-for="app in apps" :key="app.id"
            :style="applicationId === app.id ? {color: themeColor} : null"
            @click="onNodeClick(app)"
          >
            {{ app.applicationName }}
          </li>
        </ul>
      </el-scrollbar>
    </div>
    <div class="flex direction-column height-100 right-content">
      <div class="button-group">
        <el-button type="primary" @click="add">新增</el-button>
      </div>
      <el-table
        v-loading="loading" class="table"
        :data="lists" height="100%" row-key="id"
        :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white'
        }"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <div slot="empty" class="empty-lists">
          <svg-icon name="search"></svg-icon>
          <span class="empty-text">暂无数据</span>
        </div>
        <el-table-column v-for="column in columns" :key="column.prop" v-bind="column">
          <template v-if="column.prop === 'menuIcon'" #default="{ row }">
            <el-tooltip v-if="row[column.prop]" placement="top" :content="row[column.prop]">
              <svg-icon :name="row[column.prop]" class="font-xlarge"></svg-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="id" width="120" align="center">
          <template #default="{ row }">
            <td-button icon="editor" title="编辑" @click="edit(row)"></td-button>
            <td-button icon="ashbin" title="删除" icon-style="color: var(--danger-color);border-color: var(--danger-color);" @click="del(row)"></td-button>
          </template>
        </el-table-column>
      </el-table>
      <operate-modal
        v-if="visible"
        ref="modal" :modal-title="modalTitle" :data="modalData"
        :application-id="applicationId"
        @save-success="onSaveSuccess"
      ></operate-modal>
    </div>
  </div>
</template>

<script>
import TdButton from '@/components/td-button'
import OperateModal from './operate-modal'
import { queryMenuTreeList, del } from '@/api/sysMenu'
import { queryList } from '@/api/sysApplication'
import { confirmDel } from '@/utils'

const api = { queryMenuTreeList, queryList, del }
export default {
  name: 'menu-management',
  components: {
    TdButton,
    OperateModal
  },
  data () {
    return {
      applicationId: null,
      apps: [],
      loading: false,
      lists: [],
      columns: [
        { label: '菜单名称', prop: 'menuTitle' },
        { label: '菜单路径', prop: 'menuAddress' },
        { label: '菜单类型', prop: 'menuTypeName' },
        { label: '菜单标识', prop: 'menuName' },
        { label: '菜单图标', prop: 'menuIcon', align: 'center', width: 100 },
        { label: '上级菜单', prop: 'superiorMenuName' },
        { label: '所属应用', prop: 'applicationName' },
      ],
      modalTitle: '',
      modalData: {},

      visible: false,
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    }
  },
  watch: {
    applicationId (val) {
      if (val) {
        this.getMenuTreeLists(val)
      }
    }
  },
  mounted () {
    this.getApps().then((apps) => {
      if (apps) {
        const applicationId = apps[0] && apps[0].id
        if (applicationId) {
          this.applicationId = applicationId
        }
      }
    })
  },
  methods: {
    reload () {
      this.getMenuTreeLists(this.applicationId)
    },
    getApps () {
      return api.queryList().then(res => {
        if (res.code === 200) {
          this.apps = res.data
          return res.data
        }
      })
    },
    getMenuTreeLists (applicationId) {
      this.loading = true
      // eslint-disable-next-line
      const resolveChildren = (data) => {
        data.forEach(v => {
          v.hasChildren = !!(v.children && v.children.length > 0)
          if (v.hasChildren) {
            resolveChildren(v.children)
          }
        })
      }
      return api.queryMenuTreeList(applicationId).then(res => {
        if (res.code === 200) {
          // resolveChildren(res.data)
          this.lists = res.data
        }
      }).finally(() => {
        this.loading = false
      })
    },
    onNodeClick (app) {
      this.applicationId = app.id
    },
    onSaveSuccess () {
      this.visible = false
      this.reload()
    },
    add () {
      this.visible = true
      this.modalTitle = '新增菜单'
      this.modalData = {}
      this.$nextTick(() => {
        this.$refs.modal.open()
      })
    },
    edit (row) {
      this.visible = true
      this.modalTitle = '编辑菜单'
      this.modalData = {
        id: row.id,
        menuName: row.menuName,
        menuTitle: row.menuTitle,
        menuType: row.menuType,
        menuTypeName: row.menuTypeName,
        superiorMenuId: row.superiorMenuId,
        menuAddress: row.menuAddress,
        menuIcon: row.menuIcon,
        menuEnable: row.menuEnable,
        applicationId: row.applicationId,
        applicationName: row.applicationName,
        xh: row.xh || 0
      }
      this.$nextTick(() => {
        this.$refs.modal.open()
      })
    },
    del (row) {
      confirmDel(this).then(() => {
        api.del(row.id).then((res) => {
          if (res.code === 200) {
            this.reload()
            this.$message.success('删除成功')
          }
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-li {
    padding: 0.8em 0;
    color: #606266;
    cursor: default;
    transition: all .3s;
    &:hover {
      color: #333333;
    }
  }
</style>
